<template>
  <div class="order-status-main">
    <div class="bannerbar clear">
      <div class="time-status fl">
        <p class="waiting">等待买家付款</p>
        <p class="timing">剩2天2小时自动关闭</p>
        <p class="allready-pay hidden">买家已付款</p>
      </div>
      <img src="../assets/image/ico_payment@2x.png" class="fr"/>
    </div>
    <div class="consignee-msg">
      <p class="consignee-net clear"><span class="consignee-name fl">收&nbsp;货&nbsp;人&nbsp;:&nbsp;全凯</span><span class="consignee-tel fr">18696279110</span></p>
      <div class="consignee-address clear"><img src="../assets/image/ico_location@2x.png" class="fl"/><p class="consignee-add fl">收货地址：</p><p class="add-detail fl">广东省 深圳市 南山区 粤海街道 科兴科学园 A4栋 401</p></div>
    </div>
    <div class="goodsbar">
      <div class="store-msg clear">
        <img src="../assets/image/ico_Shop2@2x.png" class="store-icon fl"/>
        <p class="store-name fl">乐町旗舰店 〉</p>
      </div>
      <div class="product-bar clear">
        <img src="" class="product-img fl"/>
        <div class="product-msg fl">
          <p class="product-name">乐町2017夏季新款女装绿色短款刺绣宽松短袖T恤女夏韩版纯色上衣</p>
          <p class="product-size clear"><span class="fl">颜色：;</span><span class="fl">尺码：</span></p>
        </div>
        <div class="product-price fr">
          <p class="store-price">¥</p>
          <p class="market-price">¥</p>
          <p class="product-num">×</p>
        </div>
      </div>
    </div>
    <div class="price-count">
      <p class="clear"><span class="count-name fl">商品总价</span><span class="count-num fr">￥139.00</span></p>
      <p class="clear"><span class="count-name fl">运费</span><span class="count-num fr">￥0.00</span></p>
      <p class="clear"><span class="count-name fl">积分抵扣</span><span class="count-num fr">-￥29.00</span></p>
      <p class="clear"><span class="count-name fl">满减优惠</span><span class="count-num fr">-￥10.00</span></p>
      <p class="clear"><span class="count-name fl">订单总价</span><span class="count-num fr">￥100.00</span></p>
      <div class="total-money clear"><span class="fl">需付款</span><span class="fr">￥100.00</span></div>
    </div>
    <div class="integral">
      <span class="integral-icon fl">积分</span><span class="integral-text fl">返 100 积分</span>
    </div>
    <div class="order-msg">
      <p><span>下单时间：</span>2017.07.31 00:05</p>
      <p><span>订单编号：</span>20172323223</p>
    </div>
    <div class="btn-bar clear">
      <button class="cancel-order fl hidden">取消订单</button>
      <button class="payment fl hidden">付款</button>
      <button class="remind-shipment">提醒发货</button>
    </div>
    <!--取消订单-->
    <div class="popup hidden">
      <div class="payoff_contert">
        <img class="payoff_img" src="../assets/image/mascot@2x.png">
        <p class="payoff_p">是否确认取消订单？</p>
        <ul class="payoff_list fix">
          <li class="payoff_yes"><router-link to="/">确认取消</router-link></li>
          <li class="payoff_no" @click="isNoPay">再想一想</li>
        </ul>
      </div>
    </div>
    <!--确认收货-->
    <div class="popup hidden">
      <div class="payoff_contert">
        <img class="payoff_img2" src="../assets/image/mascot_receipt.png">
        <p class="payoff_p">是否确认收货？</p>
        <ul class="payoff_list fix">
          <li class="payoff_yes"><router-link to="/">还没有收到</router-link></li>
          <li class="payoff_no" @click="isNoPay">确认收货</li>
        </ul>
      </div>
    </div>
    <!--提醒发货成功-->
    <div class="popup hidden">
      <div class="remain-content">
        <img src="../assets/image/mascot_remind_img@2x.png" class="hidden"/>
        <img src="../assets/image/mascot_Already_remind_img@2x.png" class=""/>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
    data () {
      return {

      }},
    name: 'app',
    methods: {}
  }
</script>
<style lang="scss">
  .order-status-main{
    .bannerbar{
      width: 100%; height: 2rem; background: #fe4a6b;
      .time-status{
        padding:0.66rem 0 0 0.76rem;
        .waiting{font-size: 0.3rem; line-height: 0.3rem; color: #fff;}
        .timing{margin-top:0.2rem; font-size: 0.22rem; line-height: 0.22rem; color: #fff;}
        .allready-pay{padding-top:0.2rem; font-size: 0.3rem; line-height: 0.3rem; color: #fff;}
      }
      img{display:block;width: auto; height: 2rem; padding: 0.2rem 0.8rem 0 0;}
      }
    .consignee-msg{
      width:100%; background:#fff;
      .consignee-net{
        padding: 0.3rem 0.44rem 0 0.74rem;
        .consignee-name{font-size: 0.24rem; line-height: 0.24rem; color: #333;}
        .consignee-tel{font-size: 0.28rem; line-height: 0.28rem; color: #151517;}
      }
      .consignee-address{
        padding:0.1rem 0 0.32rem;
        img{display: block; width:0.28rem; height: 0.28rem; padding:0.06rem 0.14rem 0 0.3rem;}
        .consignee-add{font-size: 0.24rem; line-height: 0.36rem; color: #333;}
        .add-detail{width:3.4rem; font-size: 0.24rem; line-height: 0.36rem; color: #333;}
      }
    }
    .goodsbar{
      width: 100%; background: #fff;
    }
    .store-msg{
      width: 100%; height: 0.64rem;
      .store-icon{display: block; width: 0.4rem; height: 0.4rem; padding: 0.12rem 0.14rem 0.12rem 0.26rem;}
      .store-name{ font-size: 0.24rem; line-height: 0.64rem; color: #353535;}
      }
    .product-bar{
      width: 100%; height: 1.74rem; background: #f4f5f5;
      +.product-bar{border-top:0.04rem solid #fff;}
      .product-img{display: block; width: 1.34rem; height: 1.34rem; padding: 0.2rem 0.16rem 0.2rem 0.3rem;}
      .product-msg{
        padding-top:0.16rem;
        .product-name{ width: 3.92rem; font-size: 0.24rem; line-height: 0.36rem; color: #353535; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
        .product-size{
        span{ display: block; font-size: 0.2rem; line-height: 0.4rem; color: #999;}
        }
      }
      .product-price{
        padding:0.16rem 0.3rem 0 0;
        .store-price{font-size: 0.28rem; line-height: 0.36rem; color: #353535;}
        .market-price{font-size: 0.24rem; text-decoration: line-through; line-height: 0.4rem; color: #999;}
        .product-num{font-size: 0.24rem;line-height: 0.36rem; color: #666;}
      }
    }
    .price-count{
      padding: 0.3rem; background: #fff;
      p{
        padding-bottom:0.3rem;
        span{display: block; font-size: 0.24rem;}
        .count-name{color: #333;}
        .count-num{color: #353535;}
      }
      .total-money{
        width:100%; padding-top: 0.3rem; border-top: 2px solid #ddd;
        span{font-size: 0.24rem; font-weight: bold; color: #151517;}
      }
    }
    .integral{
      width: 100%; height: 0.8rem; background: #fff; border-top: 0.04rem solid #f4f5f5;
      .integral-icon{display: block; width: 0.6rem; height: 0.28rem; margin: 0.24rem 0.1rem 0.24rem 0.3rem; border: 0.02rem solid #ff365d; border-radius: 0.04rem; font-size: 0.2rem; line-height: 0.28rem; text-align: center; color: #ff365d;}
      .integral-text{font-size: 0.24rem; line-height: 0.8rem; color: #333;}
    }
    .order-msg{
      padding: 0.3rem 0 0.3rem 0.34rem; margin-bottom: 1.14rem; background: #fff; border-top: 0.2rem solid #f4f5f5;
      p{
        font-size:0.24rem; line-height:0.24rem; color:#353535;
        +p{margin-top: 0.32rem;}
        span{font-size:0.24rem; line-height:0.24rem; color:#333;}
      }
    }
    .btn-bar{
      width: 100%; height: 0.88rem; position: fixed; bottom: 0; left:0; background:#fff;
      .remind-shipment{width: 100%; height: 0.86rem; border-top: 0.02rem solid #ddd; font-size: 0.28rem; text-align: center; line-height: 0.86rem; color: #666;}
      .cancel-order,.payment{width: 50%; font-size: 0.28rem; text-align: center; line-height: 0.86rem;}
      .cancel-order{ height: 0.86rem; border-top: 0.02rem solid #ddd; color: #666;}
      .payment{ height: 0.88rem;  color: #fff; background: linear-gradient(to right,#fe4a6b,#e8163f);}
    }
    .popup{width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20;}
    .payoff_contert{ margin: -2.3rem 0 0 -3rem; width: 6rem; height: 4.6rem; background: #fff; border-radius: 0.2rem; position: absolute; left: 50%; top: 50%; z-index: 21; }
    .payoff_img{ display: block; margin: -0.88rem auto 0; width: 3.49rem; height: 2.49rem; }
    .payoff_img2{ display: block; margin: -0.88rem auto 0; width: 2.87rem; height: 2.4rem; }
    .payoff_p{ padding: 0.88rem 0 0.9rem 0; height: 0.3rem; line-height: 0.3rem; text-align: center; font-size: 0.3rem; color: #333; }
    .payoff_list{
      margin: 0 0.6rem; border-top: 1px solid #ddd;
      li{ float: left; width: calc(100%/2); height: 0.9rem; line-height: 0.9rem; text-align: center;}
    }
    .payoff_yes a{display: block; width: 100%; height: 0.9rem; font-size: 0.26rem; color: #666; line-height: 0.9rem; text-align: center; }
    .payoff_no{ font-size: 0.26rem; color: #ff365d; }
    .remain-content{
      width: 6.2rem; height: 1.5rem; position:fixed; left:50%; margin-left:-3.1rem; top:50%; margin-top:-0.75rem; z-index:9999;
      img{ width: 6.2rem; height: 1.5rem;}
    }
  }
</style>





































